﻿@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <title>site</title>
     <link href="../../Content/element-ui/lib/theme-chalk/index.css" rel="stylesheet" type="text/css" />
    <script src="../../Content/vue-2.6.11/dist/vue.min.js" type="text/javascript"></script>
    <script src="../../Content/element-ui/lib/index.js" type="text/javascript"></script>
    <script src="../../Content/axios/dist/axios.min.js" type="text/javascript"></script>
    <style type="text/css" >
    
    .el-upload-list--picture-card .el-upload-list__item
    {
        width:348px;
        }
    
    </style>
</head>
<body>
    <div id="app">
     <el-form ref="form" :model="form" size="small" style="margin-top:50px;width:800px;" label-width="80px">
       <el-form-item label="图片">
         <el-upload
          action="/ueditor/net/imageUp.ashx"
          list-type="picture-card"
          :limit="1"
          :file-list="fileList"
          :on-success="handleAvatarSuccess"
          :before-upload="beforeAvatarUpload"
           :on-exceed="handleExceed"
          :on-preview="handlePictureCardPreview"
          :on-remove="handleRemove">
          <i class="el-icon-plus"></i>
        </el-upload>
        <el-dialog :visible.sync="dialogVisible">
          <img width="100%" :src="dialogImageUrl" alt="">
        </el-dialog>
      </el-form-item>
      <el-form-item label="备注">
         <el-input v-model="form.note"  maxlength="200" show-word-limit ></el-input>
      </el-form-item>
      
       <el-form-item>
         <el-button type="primary" icon="el-icon-back" v-on:click="goback">返回上一页</el-button>
        <el-button type="primary" icon="el-icon-circle-check" v-on:click="onSubmit('form')">保存</el-button>
      </el-form-item>
  </el-form>


    </div>
   
     <script type="text/javascript">
        

		new Vue({
            el : '#app',
            data(){
                return {
                    form : 
                    {
                        id:@ViewBag.id,
                        note : '',
                        imgurl:''
                    },
					fileList:[],
                    dialogImageUrl: '',
                    dialogVisible: false
                }
            },
            created() {
               this.loadinfo();
            },
            methods : 
            {
                onSubmit(formName){
					var that = this;
                    this.$refs[formName].validate((valid) => 
                    {
						if(valid){
                            axios.post('/Site/savebaner', that.transformRequest(that.form)).then(function(response){
                                console.log(response.data)
                                var result = JSON.parse(response.data);
                                if(result.success){
									that.$message({
                                        message : "保存成功",
                                        type : 'success',
                                        duration : '500',
                                        onClose : function(){
                                            window.history.back( - 1);
                                        }
                                    });
                                }
                                else{
                                    that.$message.error("保存失败");
                                }
                                
                            }).catch(function(error){
                                console.log(error);
                            });
                        }
                        else{
                            console.log('error submit!!');
                            return false;
                        }
                    });
                },
				transformRequest(data){
                    let params = '';
                    for(let index in data){
                        params += index + '=' + data[index] + '&';
                    }
                    return params;
                },
				loadinfo(){
                    let that = this;
                    axios.post('/Site/getbanerinfo', that.transformRequest({
                        id : that.form.id
                    })).then(function(response){
                        if(response.data != ""){
                            that.form = response.data;
                             if(that.form.imgurl!="" && that.form.imgurl!=null){
                             that.fileList=[{url:that.form.imgurl}]
                             }
                        }
                    })
                    
                },
				handleRemove(file, fileList){
                   this.form.imgurl="";
                },
                handlePictureCardPreview(file){
                    this.dialogImageUrl = file.url;
                    this.dialogVisible = true;
                },
                 handleExceed(files, fileList) {
                      this.$message.warning(`当前限制只能选择1个文件!`);
					
                },
                handleAvatarSuccess(res, file){
                   let result=eval('(' + res + ')');
                   this.form.imgurl=result.url;
                  //  this.imageUrl = URL.createObjectURL(file.raw);
                },
                beforeAvatarUpload(file){
                    const isJPG = file.type === 'image/jpeg';
                    const isLt2M = file.size / 1024 / 1024 < 1;
                    
                    if(!isJPG){
                       this.$message.error('上传图片只能是 JPG 格式!');
                    }
                    if(!isLt2M){
                       this.$message.error('上传图片大小不能超过1MB!');
                    }
                    return isJPG && isLt2M;
                },goback(){
                    window.history.back(-1); 
                }
                
            }
        });




    </script>
</body>
</html>
